<template>
	<view style="background: #f8f8f8;">
		<view v-if="address.id > 0" class="address-box" @click="gotoAddressList()">
			<view class="address">
				<u-icon name="map" size="18px" color="#d7142b"></u-icon>
				<view class="info">
					<view class="primary">
						<u--text size="14px" :text="address.username"></u--text>
						<u--text size="14px" margin="0 10px" :text="address.phone"></u--text>
					</view>	
					<u--text size="13px" margin="3px 0 0 0" color="#acacac" :text="address.address"></u--text>				
				</view>
			</view>
			<u-icon name="arrow-right" size="14" color="#ccc"></u-icon>	
		</view>
		<view v-else class="address-box" @click="addAddress()">
			<view class="address">
				<u-icon name="map" size="18px" color="#d7142b"></u-icon>
				<u--text :lines="1" size="13px" margin="0 5px" color="#d7142b" text="添加收货地址"></u--text>
			</view>
			<u-icon name="arrow-right" size="14" color="#ccc"></u-icon>	
		</view>
			
		<view class="order-box">
			<view v-for="product in order.productList" :key="product.skuId" class="product">
				<view class="photo">
					<u--image :src="product.cover" width="136rpx" height="136rpx"></u--image>
				</view>
				<view class="info">
					<u--text :text="product.title" :lines="1" :block="true" size="13px" color="#2e2e2e"></u--text>
					<u--text :text="product.skuName" :lines="1" :block="true" size="12px" color="#acacac"></u--text>
					<view class="handler">
						<view class="price">￥{{ product.price }}</view>
						<view class="num">x {{ product.num }}</view>
					</view>	
				</view>
			</view>
			
			<view class="settle-item">
				<view>商品总金额</view>
				<view>￥{{ order.totalPrice }}</view>
			</view>
			<view class="settle-item">
				<view>运费</view>
				<view>￥{{ order.freight }}</view>
			</view>
			<!--
			<view class="settle-item">
				<view>优惠券</view>
				<view class="select-coupon">
					<text>2张可用</text>
					<u-icon name="arrow-right" size="14" color="#acacac"></u-icon>
				</view>
			</view>
			-->
			<view class="settle-item">
				<input v-model="message" placeholder="留言（选填）" />
			</view>	
		</view>
			
		<view class="settle-toolbar">
			<view class="amount-box">
				<u--text color="#8c8c8c" size="12" margin="0 5px 0 0" :text="'共'+ order.productNum +'件，合计'"></u--text>
				<x-price :amount="order.paymentAmount"></x-price>
			</view>
			<view class="handle-box">
				<button type="primary" class="btn" @click="submitSettle">支付</button>
			</view>
		</view>	
	</view>
</template>

<script>
import XPrice from '@/components/XPrice.vue';	
import { orderPreview, orderGenerate } from "@/api/uc/order.js";	
export default {
	components: {
		XPrice
	},
	data() {
		return {
			consumes: '', // 消费数据json
			order: {
				id: 0,
				totalPrice: 0,
				freight: 0,
				couponNum: 0,
				productNum: 0,
				paymentAmount: 0,
				productList: []
			},
			coupon: {
				id: 0,
				amount: 0
			},
			address: {
				id: 0,
				username: '',
				phone: '',
				address: ''
			},
			message: ''
		}
	},
	onLoad(options) {
		if(options.params != undefined) {
			this.consumes = options.params;
			this.init();
		}
	},
	methods: {
		init() {
			orderPreview(this.consumes, this.coupon.id, this.address.id).then(res=>{
				this.order = res.data.order;
				this.address = res.data.address;
			});
		},
		gotoAddressList() {	// 跳转到地址列表
			uni.navigateTo({
				url: '/pages/uc/addressList?from=settle'
			});	
		},
		selectedAddress(id) { // 选完地址后
			console.log("=== 选择的地址id:" + id);
			this.address.id = id;
			this.init();
		},
		addAddress() {
			uni.navigateTo({
				url: '/pages/uc/addressEdit?from=settle',
			});
		},
		submitSettle() {
			console.log('----- 提交结算');
			
			// 创建订单，返回订算号和支付金额
			orderGenerate(this.consumes, this.coupon.id, this.address.id, this.message).then(res=>{
				console.log("========== id:" + res.data.order.id + "   amount:" + res.data.order.payAmount);
				this.order.id = res.data.order.id;
				
				// 调用微信支付
				
				// 跳转到订单详情页
				uni.navigateTo({
					url: '/pages/uc/order?id=' + this.order.id
				});
			});
		}
	}
}	
</script>

<style lang="less">
.address-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0 24rpx;
	padding: 24rpx;
	background: #fff;
	border-radius: 5px;
	
	.address {
		display: flex;
		flex-direction: row;
		
		.info {
			padding: 0 5px;
			
			.primary {
				display: flex;
				flex-direction: row;
			}
		}
	}
}
	
.order-box {
	display: flex;
	flex-direction: column;
	padding: 12rpx 24rpx;
	margin: 24rpx;
	background: #fff;
	border-radius: 5px;
	
	.product {
		display: flex;
		flex-direction: row;
		margin: 24rpx 0;
		
		.info {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-left: 12rpx;
			
			.handler {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				.price {
					font-size: 13px;
					color: #3c3c3c;
				}
				
				.num {
					font-size: 12px;
					color: #acacac;
				}
			}
		}
	}
	
	.settle-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 24rpx;
		font-size: 13px;
		color: #3e3e3e;
		border-top: 1px solid #eee;
		
		.select-coupon {
			display: flex;
			flex-direction: row;
			font-size: 12px;
			color: #acacac;
		}
	}
}
	
.settle-toolbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	border-top: 1px solid #eee;
	padding: 24rpx;
	box-sizing: border-box;
	
	.amount-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.handle-box {
		.btn {
			width: 200rpx;
			height: 32px;
			line-height: 32px;
			background: #d7142b;
			border-radius: 18px;
			color: #fff;
			font-size: 14px;
			
		}
	}
	
}	
</style>